<template>
  <div id="test">
    <div class="chart">
      <div class="chart_top">
          <label>姓名：</label>
          <input v-model="persion.name"/><br/>
          <label>年龄：</label>
          <input v-model="persion.age" @keyup.enter="createtables"/><br/>
          <label>性别：</label>
        <select v-model="persion.sex">
          <option value="0">男</option>
          <option value="1">女</option>
        </select><button class="btn0" @click="createtables()">添加table</button>
      </div>
      <table class="chart_bottom">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in items" :key="item">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{sex[item.sex]}}</td>
          <td><button class="btn" @click="remvetable(index)">删除</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      msg: 'test',
      persion: {
        name: '0sdfs',
        age: '32',
        sex: '0'
      },
      sex: [
        '男', '女'
      ],
      items: [
        {
          name: '0',
          age: '32',
          sex: '1'
        }
      ],
      createtables: function () {
        this.items.push(this.persion)
        this.persion = {name: '', age: '', sex: 0}
      },
      remvetable: function (index) {
        this.items.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }
  .chart {
    width: 500px;
    height: 800px;
    margin: 10px auto;
  }
  .chart_top {
    width: 500px;
    height: 250px;
  }
  .chart_top > label{
    font-family: 微软雅黑;
    font-size: 15px;
    font-weight: 500 ;
  }
  .chart_top > select{
    width: 210px;
    height: 30px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #CCC;
    padding: 0 5px;
    font-family: 微软雅黑;
    font-size: 15px;
    font-weight: 500 ;
    margin: 20px 0;
  }
  .chart_top > input{
    width: 200px;
    height: 30px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #CCC;
    padding: 0 5px;
    font-family: 微软雅黑;
    font-size: 15px;
    font-weight: 500 ;
    margin: 20px 0;
  }
  .chart_bottom {
    width: 500px;
    min-height: 30px;
    background: #CCC;
    overflow: hidden;
    border: 1px solid #CCC;
  }
  body th {
    width: 50px;
    height: 30px;
  }
  body tr:nth-of-type(odd){
    background: #FFF;
  }
  body tr:nth-of-type(even){
    background: #EEE;
  }
  tbody > tr {
    width: 50px;
    height: 30px;
    text-align: center;
    transition: all 0.6s;
  }
  tbody > tr:hover{
    transform: scale(1.05);
  }
  .btn {
    border: 0;
    width: 50px;
    height: 20px;
    border-radius: 5px;
    outline: none;
    background: #009A61;
    color: #FFF;
    cursor: pointer;
  }
  .btn:hover {
    background: forestgreen;
  }
  .btn0 {
    margin-left: 20px;
    width: 100px;
    height: 30px;
    background: #009A61;
    border-radius: 5px;
    border: 0;
    outline: none;
    transition: all 0.6s;
    color: #FFF;
    cursor: pointer;
  }
  .btn0:hover {
    background: forestgreen;
    transform: scale(1.03);
  }
</style>
